<script lang="ts">
import { showToast } from 'vant'
import { defineComponent, ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showConfirmDialog } from 'vant'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
export default defineComponent({
  setup() {
     const store = useCounterStore();
    const {tocked,userInfoheard } = storeToRefs(store)
    const {getUserInfoFun } = store;
    // 作为 action 的 increment 可以直接解构
    let router = useRouter();
    let route = useRoute();
    let videourl = ref<string>()
    let avatorurl = ref<string>()
    let title = ref<string | number>('');
    let des = ref<string | number>('');
    let myfile: any = ref(null)
    let videoid = 11110
    let myvideojson: any = localStorage.getItem('myvideo') //发布的视频
    let myvideo: any = ref(JSON.parse(myvideojson) || []);
    console.log("333333333333333333333333", myvideo.value)
    let mydraftjson: any = localStorage.getItem('mydraft') //草稿箱
    let mydraft: any = ref(JSON.parse(mydraftjson) || [])
    console.log(".....", mydraft.value);
    const fileList: any = ref([

    ]);

    const afterRead = (file: any) => {
      // 此时可以自行将文件上传至服务器
      myfile.value = file
      videourl.value = file.content
      console.log('myfile=>', myfile.value);
      // let myvideodom: any = document.getElementsByClassName('myvideodom')
      // console.log('videodom1=>', myvideodom.duration)
      // console.log('myvideodom22222223=>', myvideodom.duration,document.getElementsByClassName('myvideodom'))
    }
    const afterRead_avator: any = (file: any) => {
      // 此时可以自行将文件上传至服务器
      console.log('执行了');
      avatorurl.value = file.content;

    };

    //草稿箱跳转到该页面
    let draftflag: any = route.query.draftflag;
    let draftvideoid = route.query.videoid;
    let currentdraft: any = ref(null);
    if (draftvideoid != undefined) {
      //草稿箱跳转
      currentdraft.value = mydraft.value.filter((item: any) => {
        return item.videoid == Number(draftvideoid);
      });
      if (currentdraft.value[0].data) {
        videourl.value = currentdraft.value[0].data.content;
      }
      if (currentdraft.value[0].avator) {
        avatorurl.value = currentdraft.value[0].avator;
        let obj: any = { url: currentdraft.value[0].avator }
        fileList.value.push(obj);
      }
      if (currentdraft.value[0].title) {
        title.value = currentdraft.value[0].title;
      }
      if (currentdraft.value[0].des) {

        des.value = currentdraft.value[0].des;
      }

    }
    let back = () => {
      console.log('555555555',!videourl.value && !avatorurl.value && !title.value && !des.value)
      if(!videourl.value && !avatorurl.value && !title.value && !des.value){
        router.back();
      }
      else{
           showConfirmDialog({
        message: '是否存入草稿箱'
      })
        .then(() => {
          //点击确定
          console.log('点击确定');
          if (draftflag == 1) {
            // 已经存入草稿
            let index = mydraft.value.findIndex((item: any) => {
              return item.videoid == draftvideoid
            });
            mydraft.value[index].avator = avatorurl.value
            mydraft.value[index].videourl = videourl.value
            mydraft.value[index].title = title.value
            mydraft.value[index].des = des.value
          }
          else {
            console.log('2222222222222222222存入草稿了')
            mydraft.value.push({
              data: myfile.value,
              title: title.value,
              des:des.value,
              time: new Date().getTime(),
              avator: avatorurl.value,
              videoid,
              videourl,
              count: {
                like: 0,
                share: 0,
                download: 0,
                collect: 0
              },
              ip_location: '广东',
              finish_send: true
            })
          };
          console.log(5555555555555555555555555, mydraft.value);
          localStorage.setItem('mydraft', JSON.stringify(mydraft.value))
          router.back();
        })
        .catch(() => {
          //   //点击取消
          console.log('点击取消')
          router.back();
        })
      }
   
    }
    watch(videourl, () => {
      // let myvideodom: any = document.querySelector('.myvideodom')
      // // console.log('videodom1=>', myvideodom.duration)
      // console.log('myvideodom2222222=>', myvideodom)
    })
    let sendVideo = () => {
      getUserInfoFun()
      console.log(userInfoheard);
      
      if (tocked) {
              if (avatorurl.value == null) {
        showToast('请选择一个图片作为视频封面')
        return
      }
      else if (myfile.value == null) {
        showToast('请选择一个视频发布')
        return
      } else if (title.value == '') {
        showToast('请输入标题')
        return
      } else {
        if (draftflag == 1) {
          // 已经存入草稿
          let index = mydraft.value.findIndex((item: any) => {
            return item.videoid == draftvideoid
          });
          mydraft.value.splice(index, 1);
          localStorage.setItem('mydraft', JSON.stringify(mydraft.value));
        }
        myvideo.value.push({
          data: myfile.value,
          title: title.value,
          time: new Date().getTime(),
          avator: avatorurl.value,
          videoid: videoid,
          count: {
            like: 0,
            share: 0,
            download: 0,
            collect: 0
          },
          ip_location: '广东',
          finish_send: true
        });
        console.log("4444444444444444444444444myvideo=>", myvideo.value);
        localStorage.setItem('myvideo', JSON.stringify(myvideo.value));
        videoid += 1;
        router.push({
          path: '/home'
        })
      }
      }else{
         
        showToast('请登录');
            router.push({
                path: '/register',
            });

      }

    }

    onMounted(() => {
    })
    return {
      back,
      afterRead,
      videourl,
      title,
      des,
      sendVideo,
      afterRead_avator,
      avatorurl,
      fileList
    }
  }
})
</script>
<template>
  <div class="add">
    <div class="topbar flex-space">
      <span class="iconfont icon-xiangzuojiantou" @click="back"></span>
      <div class="right">
        <p @click="sendVideo">上传</p>
      </div>
    </div>
    <!-- 视频部分 -->
    <div class="addvideo">
      <div class="video">
        <!-- <img :src="avatorurl" alt=""  v-if="avatorurl"/> -->
        <!-- <div class="avatorpart" v-else> -->
        <div class="avatorpart">
          <span>请选择一个图片作为视频封面:</span>
          <VanUploader :after-read="afterRead_avator" accept="image" v-model="fileList" :max-count="1" />
        </div>

        <video :src="videourl" v-if="videourl" controls class="myvideodom" duration></video>
        <div class="videoprat" v-else>
          <span>请选择一个视频:</span>
          <VanUploader :after-read="afterRead" accept="video" />
        </div>

        <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
      </div>
      <div class="select">
        <ul>
          <li>
            <div class="left">标题</div>
            <div class="right">
              <input type="text" placeholder="填写标题" v-model="title" />
            </div>
          </li>
          <li>
            <div class="left">简介</div>
            <div class="right">
              <input type="text" placeholder="填写简介" v-model="des" />
            </div>
          </li>
          <li>
            <div class="left">下载权限</div>
            <div class="right">允许新片场会员下载</div>
          </li>
          <li>
            <div class="left">允许弹幕</div>
            <div class="right">是</div>
          </li>
          <li>
            <div class="left">发布方式</div>
            <div class="right">分享可见</div>
          </li>
        </ul>
      </div>
    </div>
    <!--底部说明 -->
    <div class="bottom">
      <p>新片场视频仅用于个人展示，不涉及商业用途，</p>
      <p>请确保作品自己参与，无需商业版权</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.topbar {
  padding: 0 15px;
  align-items: center;
  border-bottom: 1px solid#f5f5f5;

  &>span {
    font-weight: 600;
    font-size: 20px;
    line-height: 55px;
  }

  .right {
    display: flex;
    align-items: center;

    span {
      font-size: 16px;
      margin-right: 10px;
      line-height: 55px;
    }

    p {
      color: #fff;
      background-color: #e54c3b;
      border-radius: 20px;
      padding: 2px 5px;
      height: 30px;
      width: 70px;
      font-size: 16px;
      text-align: center;
      box-sizing: border-box;
    }
  }
}

.addvideo {
  padding: 9px 15px;

  .videoprat,
  .avatorpart {
    display: flex;

    span {
      font-size: 14px;
      display: inline-block;
      width: 111px;
      margin-right: 20px;
    }
  }

  .avatorpart {
    margin-bottom: 10px;

    span {}
  }

  .video {
    video {
      width: 100%;
      height: auto;
    }

    img {
      width: 100%;
      height: auto;
    }
  }

  .select {
    ul {
      li {
        margin: 0 15px;
        display: flex;
        align-items: center;
        line-height: 48px;
        border-bottom: 1px solid #fafafa;

        .left {
          width: 88px;
          font-size: 14px;
          color: #3d3d3d;
        }

        .right {
          font-size: 14px;

          input {
            border: none;
            outline: none;
            font-size: 14px;
          }
        }
      }
    }
  }
}

.bottom {
  background-color: #f7f7f7;
  padding-top: 5px;

  p {
    text-align: center;
    background-color: #fff;
    font-size: 12px;
    color: #cbcbcb;

    &:first-child {
      padding-top: 8px;
      margin-top: 5px;
    }
  }
}
</style>